<template>
  <div class="forget-pwd">
    <div class="input-div">
      <span class="left">手机号码</span>
      <input type="number" v-model="mobile" class="input" placeholder="请输入手机号码">
    </div>
    <div class="input-div mab">
      <span class="left">短信验证码</span>
      <input type="number" v-model="code" class="input code-input" placeholder="请输入验证码">
      <span class="code" v-show="sending == 'false'" @click="send">短信验证</span>
      <span class="code" v-show="sending == 'true'">{{time}}s</span>
    </div>
    <div class="input-div">
      <span class="left">设置新密码</span>
      <input type="text" v-model="pwd" class="input" placeholder="请输入新密码">
    </div>
    <div class="input-div mab">
      <span class="left">确认密码</span>
      <input type="text" v-model="pwd2" class="input" placeholder="请再次输入密码">
    </div>
    <span class="btn" @click="submit()">提交</span>
    <toast v-model="is_toast" type="text" width="20em">{{toast_con}}</toast>
  </div>
</template>

<script>
  import {forgetpwd,sendcode} from '@/api/api'
  import {Toast } from 'vux'
  export default {
    components: {
      Toast,
    },
    data () {
      return {
        is_toast:false,
        toast_con:'默认',
        mobile:'',
        code:'',
        pwd:'',
        pwd2:'',
        sending: 'false',
        time: null,
      }
    },
    created () {
      if(!localStorage.getItem('time')){
        localStorage.setItem('time', 60);
        localStorage.setItem('sending', true);
        this.time = 60;
      }else{
        this.time = localStorage.getItem('time');
        this.sending = localStorage.getItem('sending');
        this.timeout()
      }
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      send(){
        if(!this.mobile){
          this.is_toast=true
          this.toast_con='请输入手机号码'
        }
        sendcode(this.mobile).then((res) =>{
          this.is_toast=true
          this.toast_con=res.data.info
          this.sending = 'true';
          localStorage.setItem('sending', true);
          if(this.timer){
            clearInterval(this.timer);
          }
          this.timeout()
        }).catch((err) => {
          console.dir(err)
        })
      },
      submit () {
        if(!this.mobile){
          this.is_toast=true
          this.toast_con='请输入手机号码'
        }
        if(!this.code){
          this.is_toast=true
          this.toast_con='请输入验证码'
        }
        if(!this.pwd){
          this.is_toast=true
          this.toast_con='请输入新密码'
        }
        if(this.pwd!=this.pwd2){
          this.is_toast=true
          this.toast_con='请确认新密码'
        }
        forgetpwd(this.mobile,this.pwd,this.code).then((res) =>{
          this.is_toast=true
          this.toast_con=res.data.info
          setTimeout(()=> {
            this.router({path: '/'})
          },2000)
        }).catch((err) => {
          console.dir(err)
        })
      },
      // 倒计时
      timeout() {
        this.timer = setInterval(() => {
          if(this.time <=0){
            clearInterval(this.timer);
            this.sending = 'false';
            this.time = 60;
            localStorage.setItem('time', 60);
            localStorage.setItem('sending', false);
            return;
          }
          this.time--;
          localStorage.setItem('time', this.time);
        }, 1000)
      }
    }
  }
</script>

<style lang="stylus" scoped>
.forget-pwd
  min-height 100vh
  background-color #f5f5f5
  .input-div
    background-color #fff
    border-bottom 1px solid #e6e6e6
    overflow hidden
    line-height 5rem
    height 5rem
    padding 0 1.5rem
    position relative
    .left
      float left
      color #333
      font-size 1.5rem
      width 9rem
    .input
      position absolute
      left 9.5rem
      height 5rem
      line-height 5rem
      width calc(100vw - 10rem)
      margin-left 1rem
      font-size 1.5rem
      outline none
      &::-webkit-input-placeholder
        color #ccc
    .code-input.input
      width calc(100% - 20rem)
    .code
      color #172F6D
      font-size 1.5rem
      line-height 2rem
      height 2rem
      position absolute
      width 9.4rem
      top 1.5rem
      right 0
      text-align center
      border-left 1px solid #172F6D
  .mab
    margin-bottom 1rem
    border none
  .btn
    width 92%;
    margin-left 4%
    height 5.3rem
    line-height 5.3rem
    margin-top 1.5rem
    text-align center
    color #fff
    background-color #172F6D
    border-radius 100px
    font-size 1.7rem
    font-weight bold
    display block
</style>
